<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="1100"
    @close="handleClose"
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="table-box">
      <el-form
        :model="settingModel"
        ref="settingModelRef"
        :rules="settingModel.rules"
        :inline="true"
        label-width="78px"
      >
        <el-table
          v-loading="loading"
          :data="settingModel.settingOptions"
          height="60vh"
          :default-sort="{ prop: 'date', order: 'descending' }"
          class="table-class"
          row-class-name="table-row-class"
          :span-method="arraySpanMethod"
        >
          <el-table-column label="时段" align="center" prop="timeSlotName" />
          <el-table-column label="限值类型" align="center" prop="limitTypeName" width="120" />
          <el-table-column
            label="报警限制类型"
            align="center"
            prop="alarmType"
            width="120"
            :formatter="(row, column) => proxy.selectDictLabel(alarm_type, row.alarmType)"
          />
          <el-table-column label="限值" align="center" prop="limitVal">
            <template #default="scope">
              <el-form-item :prop="'settingOptions.' + scope.$index + '.limitVal'" :rules="settingModel.rules.numRule">
                <el-input style="width: 200px" v-model="scope.row.limitVal" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div slot="footer" class="text-right">
      <el-button type="primary" @click="handleOk">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { alarmList } from "@/api/businessConfiguration/businessConfiguration"
import { getSetting, updateDialogForm } from "@/api/businessConfiguration/preAlarmManage"
let { proxy } = getCurrentInstance()
let { alarm_level } = proxy.useDict("alarm_level")
let { warn_time_slot } = proxy.useDict("warn_time_slot")
let { alarm_type } = proxy.useDict("alarm_type")

let visible = ref(false)
let title = ref()
let loading = ref(false)
let currentNode = ref()
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  nodeId: "",
  indexType: "STATISTIC",
})

function handleOpen(modelNode, row) {
  currentNode.value = modelNode
  visible.value = true
  queryParams.value.nodeId = modelNode.id
  getList(row)
}

let resPoseList = ref([])
let limitTypeOptions = ref([])
const checkNum = (rule, value, callback) => {
  let reg = /^-?\d+(\.\d{1,2})?$/
  if (value !== "" && !reg.test(value)) {
    callback(new Error("数字可2位小数"))
  } else {
    callback()
  }
}
let settingModel = ref({
  // 时段数组
  settingOptions: [],
  stateById: "",
  rules: {
    numRule: [{ type: "number", validator: checkNum, trigger: "change" }],
  },
})

function getList(e) {
  getSetting(e.pointId).then((response) => {
    resPoseList.value = response.data
    var data = {}
    if ("启动" == e.indexCategory) {
      settingModel.value.stateById = "1"
    } else if ("停止" == e.indexCategory) {
      settingModel.value.stateById = "2"
    } else {
      settingModel.value.stateById = ""
    }
    for (let j = 0; j < warn_time_slot.value.length; j++) {
      if ("实时" != warn_time_slot.value[j].label) {
        for (let i = 0; i < limitTypeOptions.value.length; i++) {
          data = {
            pointId: e.pointId,
            indexId: e.pointId,
            //时段名称
            timeSlotName: warn_time_slot.value[j].label,
            //时段值
            timeSlotVal: warn_time_slot.value[j].value,
            //限值类型名称
            limitTypeName: limitTypeOptions.value[i].limitName,
            //限值类型值
            limitTypeVal: limitTypeOptions.value[i].limitCode,
            //限值的值
            limitVal: "",
            //主键
            id: "",
            //启停状态
            state: settingModel.value.stateById,
            //报警限制类型
            alarmType: proxy.selectDictLabel(alarm_type.value, limitTypeOptions.value[i].alarmType),
            //nodeid
            nodeId: currentNode.value.id,
          }
          settingModel.value.settingOptions.push(data)
        }
      } else {
        continue
      }
    }
    let a = settingModel.value.settingOptions
    let b = response.data
    for (let j = 0; j < a.length; j++) {
      for (let i in b) {
        if (a[j].timeSlotVal == b[i].timeSlot && a[j].limitTypeVal == b[i].limitType) {
          a[j].limitVal = b[i].limitVal
        }
      }
    }
    title.value = "指标编号：" + e.code
  })
}

let hbCount = ref(0)
//获取限制值类型列表
function getListLimitType() {
  alarmList(queryParams.value).then((response) => {
    hbCount.value = response.rows.length
    limitTypeOptions.value = response.rows
  })
}

function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    if (rowIndex % hbCount.value === 0) {
      return {
        rowspan: hbCount.value,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

function handleClose() {
  settingModel.value.settingOptions = []
  visible.value = false
}

//表单提交
function handleOk() {
  proxy.$refs.settingModelRef.validate((valid) => {
    if (valid) {
      updateDialogForm(settingModel.value.settingOptions || "").then((response) => {
        if (response.code === 200) {
          proxy.$modal.msgSuccess("修改成功")
          visible.value = false
          settingModel.value.settingOptions = []
        } else {
          proxy.$modal.msgError(response.msg)
        }
      })
    }
  })
}

getListLimitType()
defineExpose({ handleOpen })
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

:deep .table-class {
  .table-row-class {
    td {
      border-bottom: 1px rgba(45, 103, 214, 0.5) solid !important;
      border-left: 1px rgba(45, 103, 214, 0.5) solid !important;

      &:last-child {
        border-right: 1px rgba(45, 103, 214, 0.5) solid !important;
      }
    }

    &:hover {
      td {
        background-color: transparent !important;
      }
    }

    .el-table__border-left-patch {
      background-color: rgba(255, 255, 255, 0.5) !important;
    }
  }
}
</style>
